<template>
	<view class="content">
		<view class="item-title">
			<view class="item-image">
				<image :src="itemObj.pro_pic_url" mode="" />
				<view class="dingz">
					<view class="ding-tit">
						定制
					</view>
				</view>
			</view>
			<view class="item-tab">
				{{itemObj.pro_title}}
			</view>
			<view class="item-journey">
				<view class="news_cont">
					<view class="just-sb">
						<view>
							<text class="iconfont icon-tianqi">适宜季节</text>
							<view class="item-tianqi">
								<text v-for="(item,index) in itemObj.product_season"
									:key="index">{{item.season}}、</text>
							</view>
						</view>
						<view>
							<text class="iconfont icon-zhuti">主题</text>
							<view class="item-tianqi">
								<text v-for="(item,index) in itemObj.product_type" :key="index">{{item.type}}、</text>
							</view>
						</view>
						<view class="item-content">

						</view>
					</view>
				</view>
			</view>
			<view class="fenx">
				<button open-type="share"><text class="iconfont icon-pingjia"> 分享</text></button>
			</view>

			<view class="item-tab" v-show="showType">
				<view v-for="(item,index) in tabArr" @click="changetab(item.top)" :key="index"
					:class="item.type?'active':''">
					{{item.name}}
				</view>
			</view>

			<view class="gaiyao" id="gaiyao">
				行程概要
				<image src="@/static/images/2.png" mode="" />
			</view>
			<view class="xiangxi" id="xiangxi">
				详细行程
				<image src="@/static/images/1.png" mode="" />
			</view>
			<view class="jiage" id="jiage">
				价格说明
				<image src="@/static/images/3.png" mode="" />
			</view>
			<view class="item-footer">
				<view class="f-left">
					<view class="home" @click="gihome">
						<text class="iconfont icon-icon_home"></text>
						<view>
							首页
						</view>

					</view>
					<view class="home1">
						<text class="iconfont icon-renshutongji"></text>
						<view>
							客服
						</view>
						<button class="kef-btn"> </button>
					</view>
					<view class="home">
						<text class="iconfont icon-shoucang1"></text>
						<view>
							收藏
						</view>

					</view>
					<view class="home">
						<text class="iconfont icon-dituzhaofang"></text>
						<view>
							地图
						</view>

					</view>
				</view>
				<view class="f-right">
					立即下单
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../until/http.js";
	import "@/default/item.css"
	export default {

		data() {
			return {
				itemObj: {},
				showType: false,
				tabArr: [{
						id: 0,
						key: 'gaiyao',
						type: true,
						top: 0,
						name: "行程概要"
					},
					{
						id: 1,
						key: 'xiangxi',
						type: false,
						top: 0,
						name: "详细行程"
					},
					{
						id: 2,
						key: 'jiage',
						type: false,
						top: 0,
						name: "价格说明"
					}
				]
			}
		},
		onLoad(options) {
			console.log(options);

			http.request(`/product/product/getProductDetails/` + options.id, 'GET', '').then(res => {
				console.log(res);
				this.itemObj = res.data.product_base_info
				this.tabArr.forEach(item => {
					uni.createSelectorQuery().select('#' + item.key).boundingClientRect(function(res) {
						item.top = res.top
					}).exec()
				})


			});
		},

		methods: {
			changetab(top) {
				console.log(top);
				wx.pageScrollTo({
					scrollTop: top - 50,
					duration: 300
				})

			},

			gihome() {
					uni.switchTab({
						url: '../main/main',
					})
				},
				gettypefn(index) {
					   const tablist = Array.from(this.tabArr);
// console.log('index',index);
					tablist.forEach(item => {
						// console.log('item.id',item.id);
						if (item.id === index) {
							// console.log('相等了',item.id,item.type);
							item.type = true
						} else {
							item.type = false
						}
					})
					this.tabArr=tablist
				},
				onPageScroll(res) {
					console.log(res);
					let scrollTop = res.scrollTop + 55;
					if (scrollTop >= this.tabArr[0].top) {
							this.showType = true
						console.log(22);
						if (scrollTop < this.tabArr[1].top) {
							// console.log(11);
							this.gettypefn(0)
						} 
					else if (scrollTop >= this.tabArr[1].top && scrollTop < this.tabArr[2].top) {
							this.gettypefn(1)
							// console.log(444);
						} 
					else {
							this.gettypefn(2)
							// console.log(555);
						}
					

					} else {
						// console.log(33);
						this.showType = false

					}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>